<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>妖怪商社 immortal's shop</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${css }/imtshop.css">
	<script src="${js }/jquery-1.10.2.js"></script>
	<style type="text/css">
		table {
			border-collapse: collapse;
		}
		
		table{
			border: 1px solid black;
			width: 100%;
		}
		table td, table th{
			border: 1px solid black;
			width: 25%;
			text-align: center;
		}
</style>
<script type="text/javascript">
	$(function(){
		//计算总金额
		var cart_money = 0;
		$('#cart_table>tbody>tr').each(function(){
			var $this = $(this);
			var price = $this.children('td:nth-child(3)').text().substring(2);
			var count = $this.children('td:nth-child(4)').text();
			cart_money += (price * count);
		});
		$('#cart_money').text(cart_money);
		//注册清空购物车和支付按钮
		$('#submit_cart').click(function(){
			if(confirm('确定支付吗？')) {
				$.post('${ctx}/cart/pay', function(json){
					alert(json);
					location.href = "${ctx}/index.jsp";
				});
			}
		});
		$('#clear_cart').click(function(){
			if(confirm('确定清空吗？')) {
				$.post('${ctx}/cart/clear', function(json){
					alert(json);
					location.href = "${ctx}/index.jsp";
				});
			}
		});
	});
</script>
</head>
<body>
	<%@include file="commons/header.jsp" %>
	<div id="main">
		<div align="left">
		<c:if test="${empty cart }">
			<h1>购物车是空空哒！<a href="${ctx }/index.jsp">去选购</a></h1>
		</c:if>
		<c:if test="${not empty cart }">
			<table id="cart_table">
				<thead>
					<tr>
						<th>序号</th>
						<th>名称</th>
						<th>价格</th>
						<th>数量</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${cart }" var="item" varStatus="status">
						<tr>
							<td>${status.count }</td>
							<td>${item.name }</td>
							<td><span>￥:${item.price }</td>
							<td>${item.count }</td>
						</tr>
					</c:forEach>			
				</tbody>
				<tfoot>
					<tr>
						<td colspan="2">
							总价：<span id="cart_money"></span>元
						</td>
						<td>
							<input type="button" id="submit_cart" value="确认支付"/>
						</td>
						<td>
							<input type="button"  id="clear_cart" value="清空购物车"/>
						</td>
					</tr>
				</tfoot>
			</table>
		</c:if>
		</div>
	</div>
	<%@include file="commons/footer.jsp"%> 
</body>
</html>